<template>
  <view class="package_sale">
    <view class="space-between" style="border-bottom: 1px solid #eee;padding-bottom: 20rpx;box-sizing: border-box;">
      <view>统计</view>
      <view class="data space-between">
        <view v-for="(item,index) in list" :key="item.name" :class="active===index?'active':''"
          @click="changeTab(index,item.value)">{{item.name}}</view>
      </view>
    </view>
    <view class="space-between" v-if="information.informationMine.shuju&&current===0">
      <view class="column title">
        <view>{{information.informationMine.shuju.amount}}</view>
        <view>加注量(公斤)</view>
      </view>
      <view class="column title">
        <view>{{information.informationMine.shuju.shouyi}}</view>
        <view>收益(元)</view>
      </view>
      <view class="column title">
        <view>{{information.informationMine.shuju.add_user_nums}}</view>
        <view>新增车友</view>
      </view>
    </view>
    <view class="space-between" v-if="information.informationGroup.shuju&&current===1">
      <view class="column title">
        <view>{{information.informationGroup.shuju.amount}}</view>
        <view>加注量(公斤)</view>
      </view>
      <view class="column title">
        <view>{{information.informationGroup.shuju.shouyi}}</view>
        <view>收益(元)</view>
      </view>
      <view class="column title">
        <view>{{information.informationGroup.shuju.add_user_nums}}</view>
        <view>新增车友</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { DataStore } from '@/stores/earthPushing/data';
  const information = DataStore()
  const current = ref(0)
  const active = ref(0)
  const list = [{ name: '今日', value: 'today' }, { name: '本周', value: 'week' }, { name: '本月', value: 'month' }, { name: '全部', value: 'all' }]
  const emit = defineEmits(['confirm']);
  function changeTab(index : number, value : string) {
    active.value = index
    if (current.value === 0) {
      information.informationMY(value)
    } else {
      information.informationTeam(value)
      emit('confirm');
    }
  }
  function blockedOut(index : number) {
    console.log(index)
    current.value = index
    changeTab(0, 'today')
  }
  defineExpose({ blockedOut });
</script>

<style scoped lang="less">
  .data {
    width: 400rpx;
    height: 52rpx;
    border: 1px solid #1D8DFF;
    box-sizing: border-box;
    border-radius: 30px;

    view {
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      color: #666666;
      height: 52rpx;
      line-height: 52rpx;
    }

    .active {
      background-color: #1D8DFF;
      color: #fff;
      border-radius: 30px;
    }
  }

  .title {
    margin-top: 20rpx;

    view:nth-of-type(1) {
      font-size: 42rpx;
      color: #2F77F1;
    }

    view:nth-of-type(2) {
      font-size: 24rpx;
      color: #666666;
    }
  }
</style>